<template>
	<view class="video-display" @click="onClickToVideoDetails">
		<!-- image标签是行内，自带间距，设为block就能消除这个 -->
		<image :src="item.video_logo" mode="aspectFill" class="video-display__img"></image>
		<view class="video-display__desc flex-column">
			<text class="video-display__title">{{item.video_title}}</text>
			<text class="video-display__classify" v-if="item.video_subtitle">{{item.video_subtitle}}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  item: {
    type: Object
  },
  isShort:Boolean,
  activeIndex:Number
});

const emit = defineEmits(['on-click-video'])

function onClickToVideoDetails(){
	// 从 props 中获取 item
	const videoID = props.item.id;
	const params = {
		// item: props.item,
		id: videoID,
	};
	
	if(!props.isShort){
		uni.navigateTo({
			url:`/pages/videoDetails/videoDetails?id=${params.id}`
			// url:`/pages/videoDetails/videoDetails?dataObj=${JSON.stringify(params)}`
		})
	}
	
	const data ={
		isClick:true,
		activeIndex:props.activeIndex
	}
	
	emit('on-click-video',data);
}
</script>

<style lang="scss" scoped>
.video-display{
	width: 326rpx;
	height: 283rpx;
	margin-bottom: 20rpx;
	flex-shrink: 0;
	&__img{
		display: block;
		width: 100%;
		height: 183rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	
	&__desc{
		width: 100%;
		height: 100rpx;
		background-color: #f8f8f8;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		box-sizing: border-box;
		padding: 6rpx;
		
	}
	
	&__title{
		width: 100%;
		font-size: 30rpx;
		color: #1a1a1a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	&__classify{
		font-size: 26rpx;
		color: #787878;
	}
}
</style>